<template>
  <div>
    <div class="public-notice">
      <el-carousel
        direction="vertical"
        :autoplay="true"
        indicator-position="none"
      >
        <el-carousel-item
          v-for="item in noticesList"
          :key="item.noticeId">
          <div
            class="noticeContainer"
            @click="jumpNoticeDetail(item)"
          >
            <svg-icon name="notice-public" style="width: 20px; height:20px;margin: 0 12px;" />{{ item.noticeTitle }}
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="userCenter warp">
      <div class="leftMenu">
        <div class="leftMenuBox">
          <el-menu
            :default-active="defaultActive" active-text-color="#C5AA7B"
            router
          >
            <el-menu-item
              index="userInfo"
            >
              <span class="title">
                <svg-icon
                  name="user-info"
                  style="width: 30px; height:30px;"
                />
                个人信息
              </span>
            </el-menu-item>
            <!-- <el-menu-item class="flex-start" index="message"><el-badge :value="userInfo.notRead" class="item"><span class="title">我的消息</span></el-badge></el-menu-item> -->
            <el-menu-item
              index="message"
            >
              <span class="title">
                <svg-icon
                  name="user-notice"
                  style="width: 30px; height:30px;"
                />
                我的消息<span class="tip" v-if="userInfo.notRead">{{ userInfo.notRead }}</span>
              </span>
            </el-menu-item>
            <el-menu-item
              index="myOrder"
            >
              <span class="title">
                <svg-icon
                  name="user-order"
                  style="width: 30px; height:30px;"
                />
                我的订单
              </span>
            </el-menu-item>
            <el-menu-item
              index="qaList"
            >
              <span class="title">
                <svg-icon
                  name="user-wenda"
                  style="width: 30px; height:30px;"
                />
                我的问答
              </span>
            </el-menu-item>
            <el-menu-item
              index="orderAfterSale"
            >
              <span class="title">
                <svg-icon
                  name="user-shouhou"
                  style="width: 30px; height:30px;"
                />
                售后订单
              </span>
            </el-menu-item>
            <el-menu-item
              index="myEvaluate"
            >
              <span class="title">
                <svg-icon
                  name="user-pingjia"
                  style="width: 30px; height:30px;"
                />
                我的评价
              </span>
            </el-menu-item>
            <el-menu-item
              index="signingAddress"
            >
              <span class="title">
                <svg-icon
                  name="user-dingwei"
                  style="width: 30px; height:30px;"
                />
                收货地址
              </span>
            </el-menu-item>
            <!-- <el-menu-item class="flex-start" index="changePwd"><span class="title">更改密码</span></el-menu-item> -->
            <el-menu-item
              index="favorites"
            >
              <span class="title">
                <svg-icon
                  name="user-favorite"
                  style="width: 30px; height:30px;"
                />
                我的收藏
              </span>
            </el-menu-item>
            <el-menu-item
              index="browseRecords"
            >
              <span class="title">
                <svg-icon
                  name="user-foot"
                  style="width: 30px; height:30px;"
                />
                浏览足迹
              </span>
            </el-menu-item>
            <el-menu-item
              index="couponPackage"
            >
              <span class="title">
                <svg-icon
                  name="user-coupon"
                  style="width: 30px; height:30px;"
                />
                我的卡券
              </span>
            </el-menu-item>
            <el-menu-item
              index="changePhone"
            >
              <span class="title">
                <svg-icon
                  name="user-resetphone"
                  style="width: 30px; height:30px;"
                />
                更换手机号
              </span>
            </el-menu-item>
            <!-- <el-menu-item index="unbindPhone"><span class="title">解绑手机</span></el-menu-item> -->
          </el-menu>
        </div>
      </div>
      <div class="userCenterInfo">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, ref, toRefs, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import Cookie from 'js-cookie'
import { useUser } from '@/store/user'
import {
  getGongGaoAll
} from '@/api/user/notice.js'

import SvgIcon from '@/components/svgIcon/index.vue';

defineComponent({
  name: 'UserCenter'
})
const userStore = useUser()
const { userInfo } = toRefs(userStore)

const router = useRouter();
// const defaultActive = computed(() => router.currentRoute.value.path.replace('/', ''))
let defaultActive = shallowRef('');

const noticesList = ref([]);
function getNoticesData () {
  getGongGaoAll().then(response => {
    noticesList.value = response.data.data
  })
}

function jumpNoticeDetail (item) {
  router.push({
    path: '/activity/notificationDetails',
    query: {
      id: item.noticeId
    }
  })
}

onBeforeMount(() => {
  defaultActive.value = router.currentRoute.value.path.replace('/', '')
  if (!Cookie.get('token')) {
    ElMessage.warning('请先登录')
    userStore.setIsLogin(false)
    userStore.setShowLogin(true)
    return
  }
  getNoticesData()
})
</script>

<style lang="scss" scoped>
.public-notice{
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #666666;
  .el-carousel{
    max-width: 1250px;
    height: 100%;
    margin: auto;
    color: #FFF;
    cursor: pointer;
  }
  .noticeContainer{
    display: flex;
    align-items: center;
  }
}
.userCenter {
  margin-top: 30px;
  display: flex;
  margin-bottom: 140px;
  .leftMenu {
    width: 186px;
    border: 1px solid #E5E5E5;
    margin-right: 30px;
    .leftMenuBox {
      :deep(.el-menu){
        border-right: none;
      }
      :deep(.el-menu-item){
        padding: 0 !important;
        // display: block;
        .title {
          width: 100%;
          height: 40px;
          padding: 0 8px 0 0;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        .tip{
          height: 18px;
          line-height: 18px;
          border-radius: 9px;
          color: #ffffff;
          font-size: 12px;
          padding: 0 5px;
          background-color: $mainGlod;
          position: absolute;
          // right: -18px;
          // top: -8px;
          top: 2px;
          right: 35px;
        }
      }
      :deep(.el-menu-item:focus,.el-menu-item:hover){
        background: none;
      }
      :deep(.is-active){
        .title {
          border-left: 4px solid $mainGlod;
          box-sizing: border-box;
        }
      }
    }
  }
  .userCenterInfo {
    flex: 1;
  }
}
</style>
